<template>
  <!-- 搜索条件 -->
  <el-card class="top">
    <el-form class="search-form">
      <div class="top-left">
        <!-- 书名 -->
        <el-form-item label="图书名称：" prop="bookName">
          <el-input
              v-model="searchDataForm.bookName"
              clearable
              :prefix-icon="Memo"
              placeholder="请你输入搜索图书名称"
          />
        </el-form-item>
        <!-- 作者名称 -->
        <el-form-item label="作者名称：" prop="authorName">
          <el-input
              v-model="searchDataForm.bookAuthorName"
              clearable
              :prefix-icon="User"
              placeholder="请你输入搜索图书名称"
          />
        </el-form-item>
      </div>
      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="searchForm">
          搜索
        </el-button>
        <el-button @click="resetForm">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 展示数据 -->
  <el-card class="bottom">
    <!-- 表格展示用户信息 -->
    <el-table style="width: 100%" height="50vh"
              class="bottom-table"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="records"
              border
    >
      <!-- 序号 -->
      <el-table-column fixed="left" type="index" label="#" width="50"/>
      <!-- 图书名称 -->
      <el-table-column label="图书名称" width="200" sortable show-overflow-tooltip>
        <template #default="props">
          <div style="display: flex; justify-content: center; align-items: center">
            <el-text>《{{ props.row.bookName }}》</el-text>
          </div>
        </template>
      </el-table-column>
      <!-- 作者名称 -->
      <el-table-column sortable
                       prop="bookAuthorName"
                       label="作者名称"
                       width="200"
                       show-overflow-tooltip
      />
      <!-- 图书状态 -->
      <el-table-column label="图书状态"
                       prop="bookStatus"
                       show-overflow-tooltip
                       width="200"
      >
        <template #default="props">
          <el-tag>
            {{ props.row.bookStatus === '1' ? '借阅申请中' : (props.row.bookStatus === '3' ? '归还申请中' : '') }}
          </el-tag>
        </template>
      </el-table-column>
      <!-- 借阅人 -->
      <el-table-column sortable
                       prop="borrowBookName"
                       label="借阅人"
                       width="200"
                       show-overflow-tooltip
      />
      <!-- 借阅时间 -->
      <el-table-column sortable
                       prop="borrowTime"
                       label="借阅时间"
                       width="200"
                       show-overflow-tooltip
      />
      <!-- 归还人 -->
      <el-table-column sortable
                       prop="returnBookName"
                       label="归还人"
                       width="200"
                       show-overflow-tooltip
      />
      <!-- 归还时间 -->
      <el-table-column sortable
                       prop="returnTime"
                       label="归还时间"
                       width="200"
                       show-overflow-tooltip
      />
      <!-- 操作 -->
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="props">
          <el-popconfirm :title="titleAgree(props.row)" width="260px"
                         @confirm="adminAgree(props.row)"
          >
            <template #reference>
              <el-button type="success"
                         size="small"
                         icon="CircleCheckFilled"
              >
                同意
              </el-button>
            </template>
          </el-popconfirm>
          <el-popconfirm :title="titleRefuse(props.row)" width="260px"
                         @confirm="adminRefuse(props.row)"
          >
            <template #reference>
              <el-button type="danger"
                         size="small"
                         icon="CircleCloseFilled"
              >
                拒绝
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination v-model:current-page="pageNumber"
                   v-model:page-size="pageSize"
                   :page-sizes="[5, 10, 15, 20]"
                   :background="true"
                   layout="prev, pager, next, jumper,->,sizes,total"
                   :total="totalRow"
                   @current-change="searchForm"
                   @size-change="searchForm"
    />
  </el-card>

</template>

<script setup lang="ts">
import {onMounted, reactive, ref} from 'vue'
import {Memo, User} from "@element-plus/icons-vue";
import {
  adminAgreeBorrowOrReturnReq,
  adminRefuseBorrowOrReturnReq,
  pageBookStatusAdminReq
} from "@/api/base/book-base.ts";

interface SearchData {
  bookName: string
  bookAuthorName: string
}

interface Records {
  id: string
  bookName?: string
  bookAuthorName?: string
  bookStatus?: string
  borrowBookName?: string
  borrowTime?: string
  returnBookName?: string
  returnTime?: string
}

// 默认页码
const pageNumber = ref<number>(1);
// 默认每页条数
const pageSize = ref<number>(5);
// 总条数
const totalRow = ref<number>(0);
// 存储表格数据
const records = ref<Records[]>([]);
// 搜索条件
const searchDataForm = reactive<SearchData>({
  bookName: '',
  bookAuthorName: '',
})

// 初始化
onMounted(() => {
  pageBookStatus()
})

// 搜索条件
const pageBookStatus = async () => {
  const data = {
    pageNumber: pageNumber.value,
    pageSize: pageSize.value
  }
  const result: any = await pageBookStatusAdminReq(data)
  if (result.code === 1000_0000) {
    totalRow.value = result.data.totalRow
    records.value = result.data.records
  }
};

// 同意标题
const titleAgree = (row: any) => {
  const name = row.borrowBookName ? row.borrowBookName : row.returnBookName
  const status = row.bookStatus === '1' ? '借阅' : '归还'
  return `你确定要同意${name}${status}《${row.bookName}》吗?`
}

// 拒绝标题
const titleRefuse = (row: any) => {
  const name = row.borrowBookName ? row.borrowBookName : row.returnBookName
  const status = row.bookStatus === '1' ? '借阅' : '归还'
  return `你确定要拒绝${name}${status}《${row.bookName}》吗?`
}

// 搜索表单
const searchForm = async () => {
  const data = {
    pageNumber: pageNumber.value,
    pageSize: pageSize.value,
    bookName: searchDataForm.bookName,
    bookAuthorName: searchDataForm.bookAuthorName
  }
  const result: any = await pageBookStatusAdminReq(data)
  if (result.code === 1000_0000) {
    totalRow.value = result.data.totalRow
    records.value = result.data.records
  }
}

// 重置表单
const resetForm = () => {
  searchDataForm.bookName = ''
  searchDataForm.bookAuthorName = ''
}

// 同意
const adminAgree = async (row: any) => {
  const data = {
    id: row.id,
    bookStatus: row.bookStatus
  }
  const result: any = await adminAgreeBorrowOrReturnReq(data)
  if (result.code === 1000_0000) {
    ElMessage({type: 'success', message: '同意成功'});
    await pageBookStatus()
  }
}

// 拒绝
const adminRefuse = async (row: any) => {
  const data = {
    id: row.id,
    bookStatus: row.bookStatus
  }
  const result: any = await adminRefuseBorrowOrReturnReq(data)
  if (result.code === 1000_0000) {
    ElMessage({type: 'success', message: '拒绝成功'});
    await pageBookStatus()
  }
}

</script>

<style lang="scss">
.top {
  margin-bottom: 2vh;

  .top-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 50%;
  }

  .search-form {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-form-item {
      margin-bottom: 0;

      .el-input {
        width: 220px;
      }
    }
  }
}

.bottom {

  .bottom-table {
    margin-bottom: 2vh;
  }
}
</style>
